<div class="popover" click-anywhere="$hide()" ignore-class="toggle-functional-group-select">
  <div class="arrow"></div>
  <div class="popover-header">
    <span class="title">{{ (title && (title | translate)) || ('GENERAL.TITLE.SELECT-GROUP' | translate) }}</span>

    <div class="actions">
      <a ng-click="$hide()">{{ 'GENERAL.ACTION.CLOSE' | translate }}</a>
    </div>
  </div>

  <div class="popover-wrapper">
    <div class="form-group">
      <input
        class="form-control"
        type="text"
        id="people-select-input"
        placeholder="{{ 'GENERAL.MESSAGE.SELECT-GROUP-SEARCH-PLACEHOLDER' | translate }}"
        auto-focus
        custom-keys
        up-pressed="previousGroup()"
        down-pressed="nextGroup()"
        enter-pressed="confirmGroup()"
        delayed-model="popupModel.filter"
        delay="200"
      />
    </div>
    <h4>
      <span translate="GENERAL.TITLE.MATCHING-GROUPS"></span>
    </h4>
    <div class="people-select">
      <div class="no-results" ng-show="popupModel.groupResults.length == 0">
        <span>{{ 'GENERAL.MESSAGE.SELECT-GROUP-NO-MATCHING-RESULTS' | translate }}</span>
      </div>
      <ul
        class="simple-list selectable pack"
        ng-show="popupModel.groupResults.length > 0"
        scroll-to-active
        scroll-to-active-model="popupModel.selectedGroup.id"
      >
        <li
          ng-click="confirmGroup(group);"
          ng-repeat="group in popupModel.groupResults"
          ng-class="{'active': group.id === popupModel.selectedGroup.id}"
        >
          <span>{{ group.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>
